<template>
	<div class="body">
		<!-- 最顶部的头像和id -->
		<div class="body_item_top">
			<div class="body_item_top_item">
				<van-image
				  round
				  width="6.2rem"
				  height="6.2rem"
				  src="https://img.yzcdn.cn/vant/cat.jpeg"
				/>
				<div class="body_item_top_item_font" @click="login" v-if="username == ''">立即登录</div>
				<div class="body_item_top_item_font">{{username}}</div>
				<div class="body_item_top_item_inp_dv">
					<div class="top_item_inp">积分：0</div>
					<div style="font-size: 12px;color: white;" v-if="username != ''" @click="del">退出登录</div>
				</div>
			</div>
		</div>
		
		<!-- 中间持续滚动的那行字 -->
		<div>
			<van-notice-bar
			  left-icon="volume-o"
			  text="新上线更稳定的付费快递查询接口"
			  color="#DB3B3B"
			  background="#fff"
			  style="font-size: 0.24rem;"
			  scrollable
			  speed="70"
			/>
		</div>
		
		<!-- 下面的那个灰色的小格子 -->
		<div class="hr-gary"></div>
		
		<!-- 我的订单栏 -->
		<div class="order">
			<div class="order_left">
				<van-icon name="notes-o" color="#F8C15F" size="17px"/>
				我的订单
			</div>
			<div class="order_right">
				<van-icon name="arrow" />
			</div>
		</div>
		
		<!-- 订单栏下面的四个小宫格 -->
		<div class="gard_body">
			<div>
				<van-icon name="paid" size="29px" color="#6D6D6D"/>
				<div style="color: #6D6D6D;font-size: 0.29rem;">待付款</div>
			</div>
			<div>
				<van-icon name="orders-o" size="29px" color="#6D6D6D"/>
				<div style="color: #6D6D6D;font-size: 0.29rem;">待发货</div>
			</div>
			<div>
				<van-icon name="logistics" size="29px" color="#6D6D6D"/>
				<div style="color: #6D6D6D;font-size: 0.29rem;">待收货</div>
			</div>
			<div>
				<van-icon name="comment-o" size="29px" color="#6D6D6D"/>
				<div style="color: #6D6D6D;font-size: 0.29rem;">待评价</div>
			</div>
		</div>
		
		<!-- 下面的那个灰色的小格子 -->
		<div class="hr-gary"></div>
		
		<!-- 再底下的6个宫格 -->
		<div class="gard_six_body">
			<div class="gard_body_item_top">
				<div class="gard_body_item_top_gard">
					<van-icon name="after-sale" size="27px" color="#F86A55" style="margin-left: 5px;"/>
					<div style="font-size: 8px;margin-top: 2px;">我的余额</div>
				</div>
				<div class="gard_body_item_top_gard">
					<van-icon name="edit" size="27px" color="#F86A55" style="margin-left: 5px;"/>
					<div style="font-size: 8px;margin-top: 2px;">我的砍价</div>
				</div>
				<div class="gard_body_item_top_gard" @click="goto">
					<van-icon name="coupon-o" size="27px" color="#EDB449" style="margin-left: 5px;"/>
					<div style="font-size: 8px;margin-top: 2px;">我的礼券</div>
				</div>
			</div>
			<!-- 底下 -->
			<div class="gard_body_item_down">
				<div class="gard_body_item_top_gard">
					<van-icon name="star-o" size="27px" color="#EDB449" style="margin-left: 5px;"/>
					<div style="font-size: 8px;margin-top: 2px;">我的收藏</div>
				</div>
				<div class="gard_body_item_top_gard" @click="Dizhi">
					<van-icon name="location-o" size="27px" color="#5A9FEC" style="margin-left: 5px;"/>
					<div style="font-size: 8px;margin-top: 2px;">我的地址</div>
				</div>
				<div class="gard_body_item_top_gard">
					<van-icon name="service-o" size="27px" color="#69A8EE" style="margin-left: 5px;"/>
					<div style="font-size: 8px;margin-top: 2px;">联系客服</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				username : ''
			}
		},
		methods:{
			login(){
				this.$router.push({
					path:'login'
				})
			},
			goto(){
				this.$router.push({
					path:'Giftcertificate'
				})
			},
			Dizhi(){
				this.$router.push({
					path:'addRess'
				})
			},
			del(){
				this.username = ""
			}
		},
		mounted() {
			let username = localStorage.username
			if(username){
				this.username = username
			}
		}
	}
</script>

<style scoped>
	.body_item_top
	{
		width: 100%;
		height: 12.4rem;
		background-color: #C1B18F;
		position: relative;
	}
	
	.body_item_top_item
	{
		display: flex;
	}
	
	.body_item_top_item_font
	{
		color: #fff;
		font-size: 1.8rem;
		margin-left: 1rem;
	}
	
	.body_item_top_item_inp_dv
	{
		position: absolute;
		left: 20%;
		top: 20%;
		margin-left: .8rem;
		margin-top: .8rem;
	}
	
	.top_item_inp
	{
		width: 8rem;
		height: 2.5rem;
		border: none;
		border-radius: 5px;
		color: #fff;
		font-size: 0.24rem;
		background-color: #B6A37D;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	
	.hr-gary
	{
		width: 100%;
		background-color: #F5F5F5;
		height: 1.1rem;
	}
	
	.order
	{
		width: 100%;
		height: 4rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #E9E9E9;
	}
	
	.order_left
	{
		display: flex;
		width: 22%;
		align-items: center;
		justify-content: space-between;
		font-size: 0.5rem;
		margin-left: 2rem;
	}
	
	.gard_body
	{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 0.7rem;
		height: 6rem;
	}
	
	.gard_body_item_top
	{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 7px;
	}
	
	.gard_body_item_down
	{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 12px;
	}
</style>
